<template>
    <div class="left-container">
        <h2>Left</h2>
        <art-list ref="artlistRef"></art-list>
        <p>{{ count }}</p>
        <button @click="count++">+1</button>
    </div>
</template>

<script>
import ArtList from '@/components/ArtList.vue'
    export default {
    data: () => ({
        count: 100
    }),

    // 1. beforeCreate
    beforeCreate() {
        console.log('1. beforeCreate', this.count) // undefined
    },
    // 2. created
    created() {
        console.log('2. created', this.count) // 10
    },
    // 3. beforeMount
    beforeMount() {
        console.log('3. beforeMount', document.querySelector('h2'))
    },
    // 4. mounted
    mounted() {
        console.log('4. mounted', document.querySelector('h2'))
    },
    // 5. beforeUpdate
    beforeUpdate() {
    console.log('第5个', '数据更新了，但页面DOM结构还未更新')
    console.log('新的数据是：', this.count)
    console.log('页面中的数据是：', document.querySelector('p').innerText)
    },
    // 6. updated
    updated() {
    console.log('第6个', '数据更新了，页面DOM结构也更新了')
    console.log('新的数据是：', this.count)
    console.log('页面中的数据是：', document.querySelector('p').innerText)
    },
    // 7. beforeDestroy
    beforeDestroy() {
    console.log('第7个', '组件即将被销毁')
    console.log(this.$refs.artlistRef)  // 这里的artlistRef 是 子组件的ref
    },
    // 8. destroyed
    destroyed() {
    console.log('第8个', '组件已经被销毁')
    console.log(this.$refs.artlistRef)  // 这里的artlistRef 是 子组件的ref
    },
    components: {
        ArtList
    }
    }
</script>

<style lang="less" scoped>
    .left-container {
        background-color: cadetblue;
    }
</style>